Services এবং HTTP মডিউল ব্যবহারের মাধ্যমে ডেটা ফেচ করা

MeanJS স্ট্যাকের মাধ্যমে Services এবং HTTP মডিউল ব্যবহার করে ডেটা ফেচ করা একটি গুরুত্বপূর্ণ কাজ। AngularJS-এ HTTP সার্ভিস ব্যবহারের মাধ্যমে আপনি GET, POST, PUT, এবং DELETE রিকোয়েস্ট পাঠাতে পারেন, যা সার্ভার থেকে ডেটা ফেচ করার জন্য ব্যবহৃত হয়।

এখানে, আমরা MeanJS স্ট্যাকে Services এবং HTTP মডিউল ব্যবহার করে ডেটা ফেচ করার একটি প্রক্রিয়া আলোচনা করব।

১. HTTP মডিউল এবং Services ব্যবহারের মাধ্যমে ডেটা ফেচ করা

AngularJS-এ HTTP মডিউল ব্যবহার করে API থেকে ডেটা ফেচ করার জন্য প্রথমে $http সার্ভিস ব্যবহার করতে হয়, যা HTTP রিকুয়েস্ট করার জন্য ব্যবহৃত হয়। আমরা একটি সার্ভিস তৈরি করব যা API থেকে ডেটা ফেচ করবে এবং AngularJS কম্পোনেন্টে তা প্রদর্শন করবে।

Step 1: HTTP সার্ভিস তৈরি করা

প্রথমে একটি সার্ভিস তৈরি করুন যা API থেকে ডেটা ফেচ করবে।

ng generate service api

এটি একটি api.service.ts ফাইল তৈরি করবে। এখন এই ফাইলে HTTP রিকুয়েস্ট পাঠানোর জন্য কোড লিখুন।

// src/app/api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private apiUrl = 'http://localhost:3000/api/users'; // Express API URL

  constructor(private http: HttpClient) { }

  // GET রিকোয়েস্ট ফাংশন: ইউজার ডেটা ফেচ করার জন্য
  getUsers(): Observable<any> {
    return this.http.get<any>(this.apiUrl);
  }

  // POST রিকোয়েস্ট ফাংশন: নতুন ইউজার তৈরি করার জন্য
  createUser(user: any): Observable<any> {
    return this.http.post<any>(this.apiUrl, user);
  }
}

এখানে, getUsers ফাংশনটি GET রিকোয়েস্ট পাঠাবে এবং ইউজার ডেটা ফিরিয়ে দেবে।

Step 2: API সার্ভিস Angular কম্পোনেন্টে ব্যবহার করা

এখন, আমরা AppComponent (বা অন্য যেকোনো কম্পোনেন্ট) এ এই সার্ভিসটি ব্যবহার করব এবং ইউজার ডেটা প্রদর্শন করব।

// src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>User List</h1>
    <ul>
      <li *ngFor="let user of users">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  users: any[] = [];

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    // API সার্ভিস থেকে ডেটা ফেচ করা
    this.apiService.getUsers().subscribe(data => {
      this.users = data;
    });
  }
}

এখানে, ngOnInit লাইফ সাইকেল হুক ব্যবহার করে getUsers ফাংশন কল করা হয়েছে এবং প্রাপ্ত ডেটা users অ্যারে তে সংরক্ষিত হচ্ছে। পরে, ngFor ডিরেকটিভ দিয়ে ইউজারদের তালিকা ভিউতে প্রদর্শিত হচ্ছে।

২. Express.js সার্ভার সেটআপ করা

এখন, Express.js API তৈরি করি যা AngularJS অ্যাপ্লিকেশন থেকে ডেটা গ্রহণ করবে। প্রথমে MongoDB এর সাথে সংযোগ স্থাপন এবং ডেটা পরিচালনার জন্য Mongoose ব্যবহার করতে হবে।

Step 1: MongoDB মডেল তৈরি করা

MongoDB তে ইউজার ডেটা স্টোর করার জন্য একটি মডেল তৈরি করি।

// models/user.model.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// User স্কিমা তৈরি করা
const userSchema = new Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  created: { type: Date, default: Date.now }
});

// মডেল তৈরি করা
mongoose.model('User', userSchema);

Step 2: Express API রাউট তৈরি করা

এখন Express.js API রাউট তৈরি করব যাতে AngularJS থেকে ডেটা ফেচ করা যাবে।

// routes/user.routes.js

const express = require('express');
const router = express.Router();
const mongoose = require('mongoose');
const User = mongoose.model('User');

// GET রাউট: সকল ইউজার ফেচ করা
router.get('/users', (req, res) => {
  User.find()
    .then(users => res.json(users))
    .catch(err => res.status(500).send({ message: 'Error fetching users' }));
});

module.exports = router;

এখানে, /api/users রাউটটি GET রিকোয়েস্ট গ্রহণ করবে এবং MongoDB থেকে ইউজার ডেটা রিটার্ন করবে।

Step 3: Express অ্যাপ্লিকেশন চালু করা

এখন, আমরা Express সার্ভার চালু করব এবং আমাদের রাউট যোগ করব।

// server.js

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require('body-parser');
const userRoutes = require('./routes/user.routes'); // রাউট ফাইল

const app = express();
const port = 3000;

// MongoDB সংযোগ
mongoose.connect('mongodb://localhost:27017/meanjs_project', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB সংযোগ সফল'))
  .catch(err => console.log('MongoDB সংযোগ ব্যর্থ:', err));

// Middleware
app.use(cors());
app.use(bodyParser.json());

// রাউট যুক্ত করা
app.use('/api', userRoutes);

// সার্ভার চালু করা
app.listen(port, () => {
  console.log(`Server চালু হয়েছে: http://localhost:${port}`);
});

এখানে, Express.js অ্যাপ্লিকেশনটি চালু করা হয়েছে এবং /api/users রাউটটি GET রিকোয়েস্ট গ্রহণ করবে।

৩. CORS (Cross-Origin Resource Sharing) কনফিগারেশন

যেহেতু AngularJS এবং Express.js আলাদা সার্ভারে চলতে পারে, তাই CORS কনফিগারেশন করা প্রয়োজন।

CORS কনফিগার করার জন্য, cors প্যাকেজ ইনস্টল করুন:

npm install cors

এরপর server.js ফাইলে cors প্যাকেজটি অন্তর্ভুক্ত করুন:

const cors = require('cors');
app.use(cors());  // CORS সক্রিয় করা

এটি নিশ্চিত করবে যে AngularJS ক্লায়েন্ট সাইড থেকে Express.js API সার্ভারে রিকুয়েস্ট পাঠানো সম্ভব হবে।

৪. Postman বা AngularJS দিয়ে API টেস্ট করা

এখন, Postman অথবা AngularJS ব্যবহার করে API টেস্ট করতে পারবেন।

1. GET /api/users রিকোয়েস্টে সমস্ত ইউজারের ডেটা পাবেন।
2. POST /api/users রিকোয়েস্টে নতুন ইউজার তৈরি করতে পারবেন।

সারাংশ

এখানে, আমরা AngularJS এবং Express.js ব্যবহার করে ডেটা ফেচ করার জন্য Services এবং HTTP মডিউল ব্যবহারের প্রক্রিয়া শিখলাম। $http সার্ভিস ব্যবহার করে AngularJS অ্যাপ্লিকেশন থেকে API কল করা এবং ডেটা ফেচ করা সম্ভব। Express.js API সার্ভারটি MongoDB এর সাথে সংযোগ স্থাপন করে এবং AngularJS থেকে আসা রিকুয়েস্টের মাধ্যমে ডেটা রিটার্ন করে। এই পদ্ধতি MeanJS স্ট্যাক ব্যবহার করে পূর্ণাঙ্গ ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়ক।